<template>
  <div>
    <span>按钮类型</span>
    <br>
<van-divider />
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
<br>
<van-divider />
    <span>朴素按钮</span>
    <br>
<van-divider />
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>
<br>
<van-divider />
    <span>细边框按钮</span>
    <br>
<van-divider />
<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>
    <br>
<van-divider />
<span>自定义颜色</span>
<br>
<van-divider />

<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
<br>
<van-divider />
<Test></Test>
</div>
</template>

<script>
import Test from './Test.vue';
import {
  Button,
  Cell,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  Divider
} from 'vant';
export default {
    components: {
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Divider.name]: Divider,
    Test
  },
  data() {
    return {
      result: ['a', 'b']
    };
  },
    methods: {
    // checkAll() {
    //   this.$refs.checkboxGroup.toggleAll(true);
    // },
    // toggleAll() {
    //   this.$refs.checkboxGroup.toggleAll();
    // },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    }
    },
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
